<template>
  <div class="wrapper">
    <header-nav :index_num="index_num"></header-nav>
    <div id="box">
      <!-- 公告 -->
      <div class="top">
        <img :src="imgUrl.xlb" alt />
        <!-- v-if="cd !== 0" -->
        <div class="div-v">
          <!-- <aside class="animation" v-for="(list,index) in bgValue.announcement" :key="index">
            <span>{{list.name + list.pro_content}}</span>
            <time>{{list.protime}}</time>
          </aside>-->
          <span>
            {{
            bgValue.announcement[0].name + bgValue.announcement[0].pro_content
            }}
          </span>
          <time>{{ bgValue.announcement[0].protime }}</time>
        </div>
        <!-- <div v-else>
          <span>暂无项目申报内容</span>
          <time>
            {{
            new Date().getFullYear() +
            "-" +
            (new Date().getMonth() + 1) +
            "-" +
            new Date().getDate()
            }}
          </time>
        </div>-->
      </div>
      <div class="bottom">
        <!-- 表格 -->
        <div class="table">
          <div class="top-p">项目概览</div>
          <div class="top-b">
            <div>
              <section>
                <span>初筛通过</span>
                <span>{{ bgValue.overview_one }}</span>
              </section>
            </div>
            <div>
              <section>
                <span>立项通过</span>
                <span>{{ bgValue.overview_two }}</span>
              </section>
            </div>
            <div>
              <section>
                <span>执行中</span>
                <span>{{ bgValue.overview_three }}</span>
              </section>
            </div>
            <div>
              <section>
                <span>已完结</span>
                <span>{{ bgValue.overview_four }}</span>
              </section>
            </div>
          </div>
        </div>
        <!-- 下拉框 -->
        <div class="select">
          <div >
            <el-date-picker
              v-model="value_date"
              type="daterange"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="prolist"
               clearable
              style="width:400px"
            ></el-date-picker>
          </div>
          <el-select class="area" v-model="typeval" placeholder="请选择项目类型" clearable @change="prolist">
            <el-option
              v-for="(i,j) in bgValue.type"
              :key="j"
                style="padding:0 57px"
              :label="bgValue.type[j]"
              :value="j"
            ></el-option>
          </el-select>
          <!-- <select class="two" v-model="type_value" name="type" @change="bolting('type')">
            <option>项目类型</option>
            <template v-for="(type, index) in bgValue.type">
              <option :key="index" :value="index">{{ type }}</option>
            </template>
          </select>-->

            <el-select v-model="statusval" placeholder="       请选择项目状态" clearable @change="prolist">
            <el-option
              v-for="(i,j) in bgValue.status"
              :key="j"
              style="padding:0 20px"
              :label="bgValue.status[j]"
              :value="j"
            ></el-option>
          </el-select>
          <!-- <select
            class="two"
            v-model="status_value"
            name="status"
            @change="bolting()"
            style="padding:7px;padding-right:38px"
          >
            <option>{{"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0"}}项目状态</option>
            <template v-for="(status, index) in bgValue.status">
              <option :key="index" :value="index">{{ status }}</option>
            </template>
          </select> -->

            <el-select class="area" v-model="areaval" placeholder="请选择落地区域" clearable @change="prolist">
            <el-option
              v-for="(i,j) in bgValue.area"
              :key="j"
               :label="bgValue.area[j]"
                 style="padding:0 87px"
              :value="j"
            ></el-option>
          </el-select>
          <!-- <select class="three" v-model="area_value" name="area" @change="bolting()">
            <option>落地区域</option>
            <template v-for="(area, index) in bgValue.area">
              <option :key="index" :value="index">{{ area }}</option>
            </template>
          </select> -->
          <span @click="setButton()" class="procreate">项目申报</span>
        </div>
        <!-- container -->
        <div class="con">
          <!-- 导航 -->
          <div class="top-t">
            <h3
              @click="btn(index)"
              v-for="(item, index) in text"
              :key="index"
              :class="sub == index ? 'style' : ''"
            >{{ item }}</h3>
          </div>
          <!-- 主题内容 -->
          <div class="cc">
            <template v-if="cd > 0">
              <div
                class="list"
                v-for="(item, index) in bgData.info"
                :key="index"
                @click="
                  item.tid == 1000 || item.tid == 11
                    ? $jP('application', { id: item.id })
                    : $jParams('schedule', { id: item.id })
                "
              >
                <div class="div">
                  <div class="bb">
                    <h3>{{ item.name }}</h3>
                    <h5>项目</h5>
                  </div>
                  <time>{{ item.protime }}</time>
                </div>

                <dl>
                  <dt>
                    <img :src="imgUrl.tg" style="width:120px;height:90px" v-if="item.tid == 5" />
                    <img :src="imgUrl.btg" style="width:120px;height:90px" v-else-if="item.tid == 4 || item.tid == 9" />
                    <img :src="imgUrl.zxz" style="width:120px;height:90px" v-else-if="item.tid == 10" />
                    <img :src="imgUrl.wtj" style="width:120px;height:90px" v-else-if="item.tid == 1000" />
                    <img :src="imgUrl.yjx" v-else-if="item.tid == 110" style="width:120px;height:90px" />
                    <img :src="imgUrl.zqzxz" v-else-if="item.tid == 100" style="width:120px;height:90px" />
                    <img :src="imgUrl.jxzxz" v-else-if="item.tid == 105" style="width:120px;height:90px" />
                    <img :src="imgUrl.bohui" v-else-if="item.tid == 11" style="width:120px;height:90px" />
                    <img :src="imgUrl.yhshz" v-else-if="item.status == '项目优化信息待审核'" style="width:120px;height:90px" />
                    <img :src="imgUrl.shz" style="width:120px;height:90px" v-else />
                    <!-- <img
                      :src="imgUrl.yjx"
                      style="width:120px;height:90px"
                    />-->
                  </dt>
                  <dd>
                    <!-- <img :src="imgUrl.zxz"/> -->
                    <span class="iconfont icon-zuzhijiegou"></span>
                    <span>{{ item.party_id }}</span>
                  </dd>
                  <dd>
                    <span class="iconfont icon-weizhi"></span>
                    <span>{{ item.postaladdress }}</span>
                  </dd>
                  <dd>
                    <span class="iconfont icon-shenhetongguo1"></span>
                    <div class="block-ky">
                      <b>项目状态：</b>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="item.status "
                        placement="top"
                      >
                        <p class="status1">{{ item.status }}</p>
                      </el-tooltip>
                    </div>
                  </dd>
                </dl>
              </div>
            </template>
            <template v-else>
              <span>您搜索的内容暂无！</span>
            </template>
          </div>
        </div>
        <!-- 分页按钮 -->
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :pager-count="5"
            background
            layout="prev, pager, next"
            :total="totalCount"
          ></el-pagination>
        </div>
      </div>
    </div>
    <footer-nav class="footer"></footer-nav>
  </div>
</template>

<script>
import HeaderNav from "../../components/HeaderNav";
import FooterNav from "../../components/FooterNav";
export default {
  components: {
    HeaderNav,
    FooterNav
  },
  props: {},
  data() {
    return {
      index_num: 2,
      pageSize: 1,
      currentPage: 1,
      totalCount: 1,
      imgUrl: {
        xlb: require("../../../static/img/xlb.png"),
        tg: require("../../../static/img/tg.png"),
        btg: require("../../../static/img/btg.png"),
        shz: require("../../../static/img/shz.png"),
        yhshz: require("../../../static/img/yhshz.png"),
        zqzxz: require("../../../static/img/zqzxz.png"),
        jxzxz: require("../../../static/img/jxzxz.png"),
        zxz: require("../../../static/img/zxz.png"),
        wtj: require("../../../static/img/wtj.png"),
        yjx: require("../../../static/img/yjx.png"),
        bohui: require("../../../static/img/bohui.png"),
      },
      // text: ["全部", "项目初筛", "项目立项"],
      text: ["全部"],
      sub: 0,
      bgData: [],
      bgValue: [],
      type_value: "项目类型",
      status_value: "\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0" + "项目状态",
      area_value: "落地区域",
      value_date: "",
      start_time: "",
      end_time: "",
      cd: Number,
      selinfo: {},
      typeval:'',
      areaval:'',
      statusval:""
    };
  },
  computed: {},
  watch: {},
  methods: {
    /** 筛选函数 */
    // bolting(e) {
    //   console.log(e);
    //   if (e == "time") {
    //     this.prolist(this.value_date[0], this.value_date[1]);
    //   } else if (e == "type") {
    //     this.prolist("", "");
    //   }
    // },
    type(e){
      console.log(e)
      this.prolist(this.value_date[0], this.value_date[1],this.typeval,this.statusval,this.areaval);
    },
    //   status(e){
    //   console.log(e)
    //   this.prolist("", "","","",e);
    // },
    //       area(e){
    //   console.log(e)
    //   this.prolist("", "","",e);
    // },

    // bolting() {
    //   // console.log(9999)
    //   if (this.value_date) {
    //     this.start_time = this.value_date[0];
    //     this.end_time = this.value_date[1];
    //     // console.log(1112)
    //     this.getDataTwo(
    //       this.start_time,
    //       this.end_time,
    //       this.type_value,
    //       this.status_value,
    //       this.area_value
    //     );
    //   } else {
    //     // console.log(1112)
    //     this.getDataTwo(
    //       this.start_time ? this.start_time : "",
    //       this.end_time ? this.end_time : "",
    //       this.type_value,
    //       this.status_value,
    //       this.area_value
    //     );
    //   }
    // },
    prolist(time0, time1, type, area, status, currentPage) {
      //console.log( this.value_date[0],'123')
      time0=time0?time0:""
      time1=time1?time1:""
      type=type?type:""
      area=area?area:""
      status=status?status:""
      this.$http({
        method: "get",
        url: "v1/project/list",
        params: {
          start_time: this.value_date?this.value_date[0]:'',
          end_time: this.value_date?this.value_date[1]:'',
          type: this.typeval,
          area: this.areaval,
          status: this.statusval,
          page: currentPage ? currentPage : 0,
          num: 6
        }
      })
        .then(res => {
          if (res.data.code === 200) {
            this.bgData = res.data.data.data;

            this.totalCount = this.bgData.allPage;
            this.cd = this.bgData.info.length;
          } else {
            this.$message.error("请求数据有问题！");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    /** 获取项目列表 */
    getDataTwo(
      start_time = this.start_time,
      end_time = this.end_time,
      type = this.type_value,
      status = this.status_value,
      area = this.area_value
    ) {
      if (type === "项目类型") {
        this.type_value = "";
        type = "";
      }
      if (status === "项目状态") {
        this.status_value = "";
        status = "";
      }
      if (area === "落地区域") {
        this.area_value = "";
        area = "";
      }

      let _this = this;
      this.$http({
        method: "get",
        url: "v1/project/list",
        params: {
          start_time: start_time,
          end_time: end_time,
          type: type,
          area: area,
          status: status,
          page: _this.currentPage,
          num: 6
        }
      })
        .then(res => {
          if (res.data.code === 200) {
            _this.bgData = res.data.data.data;
            _this.totalCount = _this.bgData.allPage;
            _this.cd = _this.bgData.info.length;
          } else {
            _this.$message.error("请求数据有问题！");
          }
        })
        .catch(err => {
          console.log(err);
        });

      if (this.type_value === "") {
        this.type_value = "项目类型";
      }
      if (this.status_value === "") {
        this.status_value = "项目状态";
      }
      if (this.area_value === "") {
        this.area_value = "落地区域";
      }
    },
    /** 获取下拉框数据 */
    getDataOne() {
      let _this = this;
      this.$http({
        method: "get",
        url: "v1/project/get-info",
        data: {}
      })
        .then(res => {
          if (res.data.code === 200) {
            _this.bgValue = res.data.data;
            _this.cd = _this.bgValue.announcement.length;

            for (let i in _this.bgValue.status) {
              if (_this.bgValue.status[i].length < 9) {
                _this.bgValue.status[i] =
                  "\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0" +
                  _this.bgValue.status[i];
              } else {
                _this.bgValue.status[i] =
                  "\xa0\xa0\xa0\xa0\xa0" + _this.bgValue.status[i];
              }
              // console.log(_this.bgValue.status[i])
            }
            delete _this.bgValue.area[""];
          } else {
            _this.$message.error("请求数据有问题！");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    /** 是否显示项目申报按钮*/
    setButton(){
      let _this = this;
      this.$http({
        method: "get",
        url: "v1/project/setpro?id="+sessionStorage.getItem("party_id"),
        data: {}
      }).then(res=>{
        let buttonStatus = res.data.data.code;
        let buttonMsg = res.data.data.msg;
        if(buttonStatus == 200){
           this.$jump('application');
        }else{
          this.$alert(buttonMsg, "提示", {
            confirmButtonText: "确定",
            callback: action => {
              // this.$message({
              //   type: 'info',
              //   message: ''
              // });
            }
          });
          return false;
        }
      }).catch(err => {
          console.log(err);
        });
    },
    btn(index) {
      let s = this.sub;
      s = index;
      this.sub = s;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getPackData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      // this.getDataTwo();
      this.prolist("","","","","",val)
      this.getPackData();
    },
    getPackData() {}
  },
  created() {
    // this.currentPage = Number(localStorage.getItem("page")) || 1;
    // this.handleCurrentChange(this.currentPage);
    this.getDataOne();
    this.prolist();
  },
  mounted() {},
  beforeUpdate() {
    localStorage.setItem("page", this.currentPage);
  },
  beforeDestroy() {
    localStorage.setItem("page", 1);
  },
  destroyed() {
    localStorage.removeItem("page");
  }
};
</script>

<style lang="scss" scoped>
.wrapper /deep/ .el-input__inner{
  width: 200px;
}
.wrapper /deep/.area .el-input__inner{
  text-align: center;
}

.block-ky {
  display: flex;
  font-size: 14px;
  color: #666666;
  .status1 {
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.procreate {
  border-radius: 66px !important;
  cursor: pointer;
}
.wrapper {
  min-width: 1280px;
  box-sizing: border-box;

  .footer {
    margin-top: 80px;
  }

  #box {
    margin: 0 auto;
    width: 1200px;
    box-sizing: border-box;

    .bottom {
      padding: 35px 30px 100px;
      box-sizing: border-box;
      width: 1200px;
      // height: 1320px;

      box-sizing: border-box;
      background-color: #ffffff;

      .page {
        margin-top: 60px;
        height: 36px;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        /deep/ .el-pagination.is-background .el-pager li {
          color: #333 !important;
        }

        /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
          background-color: #e60012;
          color: #fff !important;
        }

        /deep/ .el-icon.el-icon-arrow-left::before {
          content: "上一页";
          font-family: "MicrosoftYaHei";
          font-size: 12px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 1px;
          color: #666;
        }

        /deep/ .el-pagination .btn-prev {
          width: 80px;
        }

        /deep/ .el-pagination .btn-next {
          width: 80px;
        }

        /deep/ .el-icon.el-icon-arrow-right::before {
          content: "下一页";
          font-family: "MicrosoftYaHei";
          font-size: 12px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 1px;
          color: #666;
        }
      }

      .con {
        width: 1140px;
        // height: 773px;

        .cc::after {
          content: "";
          width: 367px;
          display: block;
          height: 0px;
        }

        .cc {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: flex-start;

          .list {
            margin-bottom: 60px;
            width: 367px;
            height: 184px;
            background-color: #ffffff;
            box-shadow: 0px 19px 21px 3px rgba(145, 142, 142, 0.1);
            border-radius: 10px;
            padding: 19px 29px 0px 16px;
            box-sizing: border-box;

            dl {
              width: 100%;
              height: 97px;
              margin-top: 25px;
              position: relative;
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              dd {
                height: 20px;
                display: flex;
                align-items: center;

                .iconfont {
                  font-size: 17px;
                  color: #ccc;
                  margin-right: 16px;
                }
                span {
                  font-family: "MicrosoftYaHei";
                  font-size: 14px;
                  font-weight: normal;
                  font-stretch: normal;
                  letter-spacing: 0px;
                  color: #666666;
                }

                .block-k {
                  width: 288px;
                  display: inline-block;
                  /* overflow: hidden;*/
                  text-overflow: ellipsis;
                  white-space: nowrap;

                  b {
                    font-weight: 900;
                  }
                }
              }

              dt {
                img {
                  position: absolute;
                  right: -8.5%;
                  bottom: -26%;
                  width: 120px;
                  height: 90px;
                }
              }
            }

            .div {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              time {
                font-family: "MicrosoftYaHei";
                font-size: 14px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #999999;
              }
              .bb {
                display: flex;
                justify-content: center;
                align-items: center;
                h5 {
                  margin-left: 6px;
                  height: 18px;
                  color: #f6ad35;
                  text-align: center;
                  line-height: 18px;
                  border: 1px solid #f6ad35;
                  border-radius: 4px;
                  font-size: 12px;
                }
                h3 {
                  font-family: "MicrosoftYaHei";
                  font-size: 16px;
                  font-weight: normal;
                  font-stretch: normal;
                  letter-spacing: 0px;
                  color: #333333;
                }
              }
            }
          }
        }

        .top-t {
          width: 1140px;
          height: 38px;
          padding-left: 12px;
          box-sizing: border-box;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          border-bottom: 1px solid #ccc;
          margin-bottom: 60px;

          h3 {
            text-align: center;
            margin-right: 78px;
            width: 90px;
            font-family: "MicrosoftYaHei";
            font-size: 20px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333;
          }

          .style {
            color: #e60012;
            position: relative;
            &::after {
              content: "";
              width: 91px;
              height: 2px;
              background-image: linear-gradient(#e60012, #e60012),
                linear-gradient(#ff7f7f, #ff7f7f);
              background-blend-mode: normal, normal;
              position: absolute;
              left: 0%;
              bottom: -94%;
            }
          }
        }
      }

      .select {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 50px;
        margin-bottom: 50px;

        .block {
          /deep/.el-range-editor.el-input__inner {
            width: 325px;
            background: url("../../../static/img/xa.png") 90% center no-repeat;
            background-color: #f9f8f8;
          }

          /deep/.el-date-editor .el-range-input {
            background-color: #f9f8f8;
            font-family: "MicrosoftYaHei";
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 33px;
            letter-spacing: 0px;
            color: #666666;
          }

          /deep/.el-input__inner {
            border: 1px solid #c7c7c7;
          }

          /deep/.el-date-editor .el-range-separator {
            font-family: "MicrosoftYaHei";
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 33px;
            letter-spacing: 0px;
            color: #666666;
          }

          /deep/ .el-input__icon {
            width: 0px;
          }
        }

        .one {
          // padding-left: 30px;
          box-sizing: border-box;
          /* 清除默认的箭头样式 */
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          /* 右侧添加小箭头的背景图 */
          background: url("../../../static/img/xa.png") 90% center no-repeat;
          background-size: 14px 8px;
          // width: 325px;
          padding: 0px 30px;
          height: 38px;
          background-color: #f9f8f8;
          border-radius: 4px;
          border: solid 1px #c7c7c7;
          outline: none;
          font-size: 18px;
          color: #666;
        }

        .two {
          // padding-left: 30px;
          // padding-right: 48px;
          box-sizing: border-box;
          /* 清除默认的箭头样式 */
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          /* 右侧添加小箭头的背景图 */
          background: url("../../../static/img/xa.png") 90% center no-repeat;
          background-size: 14px 8px;
          // width: 134px;
          padding: 7px 33px;
          // height: 38px;
          background-color: #f9f8f8;
          border-radius: 4px;
          border: solid 1px #c7c7c7;
          outline: none;
          font-size: 18px;
          color: #666;
          // text-align: center;
        }

        .three {
          // padding-left: 30px;
          /* 清除默认的箭头样式 */
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          /* 右侧添加小箭头的背景图 */
          background: url("../../../static/img/xa.png") 90% center no-repeat;
          background-size: 14px 8px;
          // width: 134px;
          padding: 0 35px 0 30px;
          box-sizing: border-box;
          height: 38px;
          background-color: #f9f8f8;
          border-radius: 4px;
          border: solid 1px #c7c7c7;
          outline: none;
          font-size: 18px;
          color: #666;
          text-align: center;
        }
        span {
          display: inline-block;
          text-align: center;
          line-height: 32px;
          width: 96px;
          height: 32px;
          background-image: linear-gradient(
              69deg,
              #cc263f 0%,
              #f42b47 100%,
              #ed162d 100%,
              #e60012 100%
            ),
            linear-gradient(#e60012, #e60012);
          background-blend-mode: normal, normal;
          border-radius: 4px;
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #ffffff;
        }
      }

      .table {
        width: 1137px;
        height: 181px;
        border: solid 1px #dadada;
        background-color: #f6f6f6;
        box-sizing: border-box;

        .top-b {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          div {
            width: 283px;
            height: 139px;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;

            section {
              width: 72px;
              height: 67px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;

              span:first-child {
                font-family: "MicrosoftYaHei";
                font-size: 18px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #666666;
              }

              span:last-child {
                font-family: "MicrosoftYaHei";
                font-size: 24px;
                font-weight: bold;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #e60012;
              }
            }
          }
        }

        .top-p {
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
          width: 1136px;
          height: 40px;
          background-color: #f6f6f6;
          text-align: center;
          line-height: 40px;
          border-bottom: 1px solid #dadada;
          border-right: 1px solid #dadada;
          box-sizing: border-box;
        }
      }
    }

    .top {
      width: 1100px;
      height: 40px;
      margin: 30px 0 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .div-v {
        width: 1060px;
        height: 100%;
        overflow: hidden;
        display: flex;
        // flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        line-height: 38px;
      }

      /*



      .animation {
        display: flex;
        justify-content: space-between;
        animation: myMove 15s linear infinite;
        animation-fill-mode: forwards;
        width: 95%;
        height: 100%;
        margin-bottom: 25px;
        margin-left: 25px;
      }
      */

      img {
        width: 33px;
        height: 27px;
      }
      div {
        width: 672px;
        height: 21px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #666666;
        }

        time {
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          letter-spacing: 0px;
          color: #999999;
        }
      }
    }
  }
}

/*文字无缝滚动*/
@keyframes myMove {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-150px);
  }
}
</style>
